﻿<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>登录</title>

        <!-- CSS -->
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500">
        <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css">
        <link rel="stylesheet" href="assets/css/login.css">
        <link rel="stylesheet" href="assets/css/step.css">
        <link rel="stylesheet" type="text/css" href="assets/js/plagins/webuploader-0.1.5/webuploader.css">

        <!-- Favicon and touch icons -->
        <link rel="shortcut icon" href="assets/ico/favicon.png">
        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
        <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
        <style>
            .form-lable{
                text-align:right;
                font-size:13px;
            }
        </style>

    </head>

    <body>
        <!-- Top content -->
        <div class="top-content">
            <div class="inner-bg">
                <div class="container">
                    <div class="row">
                        <div class="form-register-box">
                            
                            <div class="text-left">
                                <h1>
                                    <label class="logo"></label>
                                    <label class="logo-title"></label>
                                </h1>
                            </div>

                            <div style="background-color:white;width:820px;height:560px;-moz-border-radius:4px;-webkit-border-radius:4px; border-radius:4px;">

                                    <div style="float:left;width:260px;height:560px;background: #eee;-moz-border-radius:4px; -webkit-border-radius:4px; border-radius: 4px;">
                                        <img src="assets/img/logo.jpg" style="margin-top:50px;width:138px;height:50px;" />
                                        <div style="height:350px;padding:30px 0px 0px 33px;text-align:left;">
                                            <div>
                                                <span class="question">如有疑问，请联系客服</span>
                                            </div>
                                            <div style="margin:10px">
                                                <i class="glyphicon">
                                                    <span class="form-icon icon-tel"></span>
                                                </i>
                                                <lable class="tel">400 000 8888</lable>
                                            </div>
                                            <div style="margin:10px;">
                                                <i class="glyphicon">
                                                    <span class="form-icon icon-qq"></span>
                                                </i>
                                                <lable class="qq">QQ在线客服</lable>
                                            </div>
                                            <div style="margin:10px;">
                                                <i class="glyphicon">
                                                    <span class="form-icon icon-wechat"></span>
                                                </i>
                                                <lable class="wechat">微信客服</lable>
                                            </div>
                                        </div>
                                        <div style="height:40px;">
                                            <a class="back-login" href="login.html">返回登录></a>
                                        </div>
                                    </div>
                                    <form class="form-horizontal" id="form1">
                                       <div class="all-content">
                                            <div class="step-first">
                                                <div class="step-cir step-cir-first">1</div>
                                                <div id="step_label_2" class="step-cir-next step-cir-second">2</div>
                                                <div id="step_label_3" class="step-cir-next step-cir-third">3</div>
                                                <lable class="step-lable-first">填写资料</lable>
                                                <lable class="step-lable-second">联系方式</lable>
                                                <lable class="step-lable-third">完成并等待</lable>
                                            </div>

                                            <hr/>

                                            <div id="first-content">
                                                <div style="height:374px;">
                                                    <div class="form-group">
                                                        <label for="company" class="col-xs-3 control-label">公司名称:</label>
                                                        <div class="col-xs-9">
                                                            <div class="input-group">
                                                                <span class="input-group-addon">
                                                                    <i class="glyphicon">
                                                                        <span class="form-icon icon-company"></span>
                                                                    </i>
                                                                </span>
                                                                <input type="text" name='company_name' class="form-control" placeholder="请输入公司全名">
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="form-group">
                                                        <label for="company" class="col-xs-3 control-label">法人姓名:</label>
                                                        <div class="col-xs-9">
                                                            <div class="input-group">
                                                                <span class="input-group-addon">
                                                                    <i class="glyphicon">
                                                                        <span class="form-icon icon-name"></span>
                                                                    </i>
                                                                </span>
                                                                <input type="text" name='company_name' class="form-control" placeholder="请输入法人姓名">
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="form-group">
                                                        <label for="company" class="col-xs-3 control-label">营业执照号:</label>
                                                        <div class="col-xs-9">
                                                            <div class="input-group">
                                                                <span class="input-group-addon">
                                                                    <i class="glyphicon">
                                                                        <span class="form-icon icon-licence"></span>
                                                                    </i>
                                                                </span>
                                                                <input type="text" name='company_name' class="form-control" placeholder="请输入营业执照号">
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="form-group">
                                                        <label for="company" class="col-xs-3 control-label">上传营业执照:</label>
                                                        <div class="col-xs-9" style="width:100px;">
                                                            <div id="uploader-demo" class="margin:0px;width:100px;height:100px;">
                                                                <!--用来存放item-->
                                                                <div id="fileList" class="uploader-list"></div>
                                                                <div id="filePicker"></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div style="height:50px">
                                                    <input type="button" class="btn-next" id="fnext" value="下一步" />
                                                </div>
                                            </div>

                                            <div id="second-content" style="display:none;height:368px;margin:0px auto;">
                                                <div style="height:374px">
                                                    <p class="title" >
                                                        您好！宁波市XX泰得医疗器械有限公司
                                                    </p>
                                                    <div class="col-md-12 text-left" style="margin-left:20px"> 您企业的联系方式有：</div>
                                                    <div style="margin-top:50px;">
                                                        <p>
                                                            单位电话：0533-88888888
                                                        </p>
                                                        <p>
                                                            联系人：余**
                                                        </p>
                                                        <p>
                                                            联系人电话：135****9845
                                                        </p>
                                                        <p>
                                                            请选择客服回访方式：<input type="radio" name="tel" value="1" checked />单位电话 <input type="radio" name="tel" value="2" />联系人电话
                                                        </p>
                                                    </div>
                                                </div>
                                                <div style="height:50px;">
                                                    <input type="button" class="btn-back" id="sback" value="上一步" />
                                                    <input type="button" class="btn-next" id="snext" value="下一步" />
                                                </div>
                                            </div>

                                            <div id="third-content" style="display:none;">

                                                <p class="title">
                                                    您好！宁波市XX泰得医疗器械有限公司
                                                </p>
                                                <p>
                                                    稍后客服会以电话方式联系您，请注意接听!
                                                </p>
                                                <p class="title">
                                                    回访方式：0533-88888888(单位电话)
                                                </p>

                                                <img src="assets/img/login/pic2_login.png" />

                                            </div>
                                        </div>
                                    </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="padding: 40px">
                    <div class="text">
                        Copyriht@国泰医通（浙江）供应链管理有限公司 版权所有 ICP证：浙B2-20080101
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Javascript -->
        <script src="assets/js/jquery-1.11.1.min.js"></script>
        <script src="assets/bootstrap/js/bootstrap.min.js"></script>
        <script src="assets/js/jquery.backstretch.min.js"></script>
        <!-- <script src="assets/js/retina-1.1.0.min.js"></script> -->
        <script src="assets/js/login/login.js"></script>
        <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
        <script src="assets/js/plagins/webuploader-0.1.5/webuploader.min.js"></script>
        <script type="text/javascript">
            $(function () {
                var BASE_URL = "assets/js/plagins/webuploader-0.1.5"
                $("#fnext").click(function () {
                    $("#first-content").hide();
                    $("#second-content").show();
                    $("#third-content").hide();
                    $(".step-first").css("background-position", "0px -46px");
                    $(".step-lable-second").css("color", "#fff");
                    $('#step_label_2').removeClass('step-cir-next').addClass('step-cir');
                })

                $("#snext").click(function () {
                    $("#first-content").hide();
                    $("#second-content").hide();
                    $("#third-content").show();
                    $(".step-first").css("background-position", "0px -92px");
                    $(".step-lable-third").css("color", "#fff");
                    $('#step_label_3').removeClass('step-cir-next').addClass('step-cir');
                })

                $("#sback").click(function () {
                    $("#first-content").show();
                    $("#second-content").hide();
                    $("#third-content").hide();
                    $(".step-first").css("background-position", "0px 0px");
                    $(".step-lable-second").css("color", "#888");
                    $('#step_label_2').removeClass('step-cir').addClass('step-cir-next');
                })
               
            // 初始化Web Uploader
            var uploader = WebUploader.create({

                // 选完文件后，是否自动上传。
                auto: true,

                // 图片文件路径
                swf: BASE_URL + '/js/Uploader.swf',

                // 文件接收服务端。
                server: 'http://webuploader.duapp.com/server/fileupload.php',
                //server:'',
                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                pick: '#filePicker',

                // 只允许选择图片文件。
                accept: {
                    title: 'Images',
                    extensions: 'gif,jpg,jpeg,bmp,png',
                    mimeTypes: 'image/*'
                }
            });

            // 当有文件添加进来的时候
            uploader.on('fileQueued', function (file) {
                var $li = $(
                        '<div id="' + file.id + '" class="file-item thumbnail">' +
                            '<img>' +
                            '<div class="info">' +'</div>' +
                        '</div>'
                        ),
                    $img = $li.find('img');


                // $list为容器jQuery实例
                $("#fileList").append($li);

                // 创建缩略图
                // 如果为非图片文件，可以不用调用此方法。
                // thumbnailWidth x thumbnailHeight 为 100 x 100
                
                uploader.makeThumb(file, function (error, src) {
                    if (error) {
                        $img.replaceWith('<span>不能预览</span>');
                        return;
                    }

                    $img.attr('src', src);
                    $("#filePicker").hide();
                }, 250, 120);
            });

                // 文件上传过程中创建进度条实时显示。
            uploader.on('uploadProgress', function (file, percentage) {
                var $li = $('#' + file.id),
                    $percent = $li.find('.progress span');

                // 避免重复创建
                if (!$percent.length) {
                    $percent = $('<p class="progress"><span></span></p>')
                            .appendTo($li)
                            .find('span');
                }

                $percent.css('width', percentage * 100 + '%');
            });

                // 文件上传成功，给item添加成功class, 用样式标记上传成功。
            uploader.on('uploadSuccess', function (file) {
                $('#' + file.id).addClass('upload-state-done');
            });

                // 文件上传失败，显示上传出错。
            uploader.on('uploadError', function (file) {
                var $li = $('#' + file.id),
                    $error = $li.find('div.error');

                // 避免重复创建
                if (!$error.length) {
                    $error = $('<div class="error"></div>').appendTo($li);
                }

                $error.text('上传失败');
            });

                // 完成上传完了，成功或者失败，先删除进度条。
            uploader.on('uploadComplete', function (file) {
                $('#' + file.id).find('.progress').remove();
            });

            })

        </script>
        <!--[if lt IE 10]>
            <script src="assets/js/placeholder.js"></script>
        <![endif]-->

    </body>

</html>